<template>
  <avue-crud :option="option"
             :permission="getPermission"
             :data="data"
             :page.sync="page"
             :before-open="beforeOpen"
             v-model="form"
             ref="crud"
             @row-update="rowUpdate"
             @row-save="rowSave"
             @row-del="rowDel"
             @refresh-change="refreshChange"
             @on-load="onLoad">
    <template slot="shareId" slot-scope="scope">
      <span >{{scope.row.shareUserName}}</span>
      <i class="el-icon-s-custom blue" v-if="scope.row.isOwner"></i>
    </template>
    <template slot="shareRole" slot-scope="scope">
      <span >{{scope.row.shareRoleName}}</span>
    </template>
  </avue-crud>
</template>

<script>

import {getProjectMembers, removeMember, saveOrUpdateMember} from "@/api/project";

export default {
  props:{
    projectId:{
      type: String,
      default: null
    }
  },
  data () {
    return {
      form: {},
      query: {},
      page: {
        pageSize: 100,
        currentPage: 1,
        total: 0
      },
      option: {
        index: true,
        copyBtn: false,
        editBtn: true,
        delBtn: true,
        labelWidth: 110,
        column: [
          {
            label: '成员',
            span: 24,
            labelWidth: 100,
            type: 'select',
            multiple: false,
            remote: true,
            prop: 'shareId',
            props: {
              label: 'name',
              value: 'id'
            },
            dicUrl: this.$website.url+`/user/list?keywords={{key}}`,
            rules:[
              {required: true,message: '请选择用户',trigger: 'blur'}
            ]
          },
          {
            label: '分配角色',
            prop: 'shareRole',
            span: 24,
            labelWidth: 100,
            type: 'select',
            dicData: [{
              label: '查看角色',
              value: 0
            }, {
              label: '管理角色',
              value: 1
            }],
            rules:[
              {required: true,message: '请选择一个角色',trigger: 'blur'}
            ]
          }
        ]
      },
      data: []
    };
  },
  methods: {
    getPermission(key, row, index){
      if(row && row.isOwner){
        return false
      }
      return true
    },
    rowSave (row, done, loading) {
      console.log("保存了项目组成员,",row)
      row.projectId = this.projectId
      saveOrUpdateMember(row).then(() => {
        this.onLoad();
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowUpdate (row, index, done, loading) {
      saveOrUpdateMember(row).then(() => {
        done();
        this.onLoad();
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowDel (row, index) {
      this.$confirm("确定移除项目成员?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return removeMember(row.id);
        })
        .then(() => {
          this.onLoad();
          this.$message({
            type: "success",
            message: "移除成功!"
          });
        });

    },
    beforeOpen (done, type) {
      done();
    },
    refreshChange () {
      this.onLoad();
    },
    onLoad () {
      getProjectMembers(this.projectId).then(res => {
        const data = res.data.data;
        this.page.total = data.length;
        this.data = data;
      });
    }
  }
};
</script>

<style>
</style>
